<template>
    <div class="atlas-wrapper" ref="dom"></div>
</template>

<script>


    export default {
        name: "MemberAtlas",
        props: {
            listdata: {
                type: Array,
                default() {
                    return [];
                }
            },
            links: {
                type: Array,
                default() {
                    return [];
                }
            },
            categories: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        mounted() {
            let option = this.initOption();
            let myChart = this.$echarts.init(this.$refs.dom);
            myChart.setOption(option);
            myChart.on("click", param => {
                this.$emit('node-click', param);
            });
        },
        methods: {
            initOption() {
                return {
                    backgroundColor: '#fff',
                    // tooltip: {
                    //     formatter: '{b}'
                    // },
                    animationDuration: 100,
                    animationEasingUpdate: 'quinticInOut',
                    series: [{
                        name: '关系图谱',
                        type: 'graph',
                        layout: 'force',
                        radius: ['90%', '90%'],
                        // node: {
                        //     symbolSize : 40
                        // },
                        force: {
                            repulsion: 40,
                            gravity: 0.02,
                            edgeLength: [1, 2],
                            // 是否显示动画
                            layoutAnimation: false,
                        },
                        data: this.listdata,
                        links: this.links,
                        categories: this.categories,
                        roam: true,
                        // 鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
                        nodeScaleRatio: 0,
                        // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
                        // emphasis: {focus: 'adjacency'},
                        lineStyle: {
                            opacity: 0.5,
                            width: 2,
                            curveness: 0
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            color: '#fff', // 字体颜色
                            fontWeight: 'normal', // 'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                            fontSize: "14", //字体大小
                            formatter: function (params) {
                                return params.data.showName //此处为label转换 并转换颜色
                            },
                            fontStyle: '600',
                        },
                        itemStyle: { // 节点圆圈的全局样式
                            radius: 60,
                            borderColor: '#fff',
                            borderWidth: 4,
                            shadowBlur: 10,
                            shadowColor: 'rgba(58, 105, 210, 0.3)'
                        },
                        edgeLabel: {
                            show: true,
                            fontSize: 12,
                            formatter: "{c}"
                        }
                    }],
                    color: this.categories.map(item => item.color) // 自定义调色板
                };
            }
        }
    };
</script>

<style scoped lang="scss">
    .atlas-wrapper {
        width: 100%;
        height: 100%;
    }
</style>
